<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			#header{
				width: 100%;
				height: 50px;
				/*边框，背景颜色：查选择器是否选中，效果是否正确*/
				border: 1px solid black;
				background-color: #333;
			}
			#body{
				width: 100%;
				height: 900px;
				border: 1px solid black;
				background-color: #ff0000;
			}
			#footer{
				width: 100%;
				height: 200px;
				border: 1px solid black;
				background-color: #333;
			}
		</style>
	</head>
	<body>
		<!-- 1.元素选择器：以元素名作为选择器，抓取元素 
		2.伪类选择器：原选择器上附加效果。  ：hover 鼠标悬停
		                                 ：before 在   前添加文本，一般与content属性
										 after在后添加文本，一般与content属性
		3.类选择器：以1个或多个别名作为选择器，抓取元素【页面微调】
		4.通用选择器：抓取页面上所有元素，规范页面元素【盒模型，字体】
		-->
		<!-- id选择器：用在页面结构搭建【唯一性】 
		语法：前标记 id="header" 别名
		css   #header 别名
		id选择器与class选择器区别
		搭建页面结构，根据结构中小范围微调
		-->
		<div id="header"></div>
		<!-- 作业：网页主体 900px 网页尾巴200px -->
		<div id="body"></div>
		<div id="footer"></div>
	</body>
</html>